<!DOCTYPE html>
<html lang="en" xmlns:v-for="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-model="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app" style="display: flex;flex-direction: column;justify-content: center;align-items: center">
    <div style="display: flex;flex-wrap: nowrap">
        <el-input
                placeholder="请输入内容"
                v-model="textarea"
                clearable
        >
        </el-input>
        <el-button type="primary" v-on:click="btn(textarea)" v-model="textarea">添加</el-button>
    </div>

    <div style="width: 290px;">
        待办事项:
        <el-button @click="show3 = !show3">隐藏</el-button>

        <el-row :gutter="12" v-for="(item,index) in todoList">
            <div v-show="show3">
                <el-col :span="16">
                    <el-card shadow="hover">
                        {{item}}
                    </el-card>
                </el-col>
                <el-button type="primary" v-on:click="addList1(index)">完成</el-button>
            </div>
        </el-row>
    </div>
    <div style="width: 290px;">
        <span style="width: 50px">完成事项:</span>
        <el-button @click="show2 = !show2">隐藏</el-button>
        <el-row :gutter="12" v-for="(item,index) in addList">
            <div v-show="show2">
                <el-col :span="24">
                    <el-card shadow="hover" placeholder="请输入内容">
                        {{item}}
                    </el-card>
                </el-col>
            </div>
        </el-row>
    </div>

</div>

</body>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            show3: true,
            show2: true,
            textarea: "",
            activePage: 1,
            radio: 1,
            todoList: [],
            addList: [],

        },
        methods: {
            btn(textarea) {
                if (textarea !== '') {
                    let num = this.todoList.length;
                    if (this.todoList[0] === '') {
                        Vue.set(this.todoList, num - 1, textarea);
                    } else {
                        Vue.set(this.todoList, num, textarea);
                    }
                } else {
                    this.$message({
                        message: '恭喜你发现了一个BUG',
                        type: 'warning'
                    });
                }

            },
            addList1(index) {
                let num = this.addList.length;
                let textarea = this.todoList[index];
                if (this.addList[0] === '') {
                    Vue.set(this.addList, num - 1, textarea);
                } else {
                    Vue.set(this.addList, num, textarea);
                }
                if (textarea === '') {
                    this.$message({
                        message: '好家伙又是一个BUG',
                        type: 'warning'
                    });
                }
                this.todoList.splice(index, 1);
            }
        },

    });
</script>
<style>
    .transition-box {
        margin-bottom: 10px;
        width: 200px;
        height: 20px;
        border-radius: 4px;
        background-color: #409EFF;
        text-align: center;
        color: #fff;
        /*padding: 10px;*/
        box-sizing: border-box;
        margin-right: 0px;
    }

    .el-card__body {
        padding: 10px;
    }
</style>
</html>